<template>
  <div class="brief-introduction">
    <div class="title">更懂前端的监控系统</div>
    <img class="edith" :src="edith" alt="">
    <div class="info">简单几步搭建专属前端监控系统，实时了解线上应用健康情况，支持千万级PV日活量！</div>
    <div class="mudule-titie">支持项目：</div>
    <div class="mudule-content">
      <div class="flex" v-for="(item,index) in list" :key="index">
        <img class="icon" :src="item.icon" alt="">
        <span class="text">{{item.text}}</span>
      </div>
    </div>
    <div class="bottom" @click="clickHandler">立即体验DEMO</div>
  </div>
</template>
<script setup lang="ts">
import edith from '~/assets/home/edith.png'
import h5 from '~/assets/home/h5.png'
import pc from '~/assets/home/pc.png'
import uni from '~/assets/home/uni.png'
import applet from '~/assets/home/applet.png'
import { defineEmits } from 'vue'

let list = [{
  icon: h5,
  text: 'H5前端'}
, {
  icon: pc,
  text: 'PC前端'
}, {
  icon: applet,
  text: '小程序'
}, {
  icon: uni,
  text: 'uni-app'
}]

let emits = defineEmits(['experoemce'])
let clickHandler = () => {

  emits('experoemce')

}

</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.brief-introduction
  position relative
  width 100%
  height 493px
  padding 32px 27px 24px
  {flexBoxColumn}
  justify-content flex-start
  background url(../../../assets/home/top-bg.png) no-repeat center center
  background-size 100% 100%
  .title
    font-size 26px
    font-weight 500
    color #363B52
    line-height 37px
  .edith
    margin-top 7px
    width 80px
  .info
    margin-top 10px
    font-size 14px
    font-weight 400
    color #828594
    line-height 24px
  .mudule-titie
    width 100%
    margin-top 12px
    font-size 14px
    font-weight 400
    color #828594
    line-height 16px
  .mudule-content
    width 100%
    {flexBox}
    justify-content space-between
    margin-top 8px
    .flex
      {flexBox}
    .icon
      width 14px
    .text
      font-size 12px
      font-weight 400
      color #363B52
      line-height 12px
      margin-left 8px
  .bottom
    position absolute
    {flexBox}
    width 142px
    height 40px
    background #FF7626
    border-radius 20px
    font-size 14px
    font-weight 400
    color #FFFFFF
    line-height 20px
    bottom 24px
    left 50%
    transform translateX(-50%)
</style>